<template>
  <div>
    <el-main>
      <el-row type="flex">
        <el-col>
          <el-select v-model="sort_column" placeholder="请选择排序" @change="columnChange" clearable>
            <el-option v-for="item in columnOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>

      </el-row>
      <el-table id="table" :header-cell-style="{ background: '#F3F8FE' }" @row-click="rowClick" :data="tableData" border
        style="width: 100%;margin: 20px 0;">
        <el-table-column prop="ano" align="center" width="150" label="缩略图">
          <template slot-scope="scope">
            <div style="display: flex;justify-content: center;">
              <img v-if="scope.row.imgo != '暂无数据'" :src="scope.row.imgo" alt=""
                style="width: 100px; height: 100px; margin-right: 10px;">
              <div v-else>{{ scope.row.imgo }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="ano" align="center" label="申请号">
        </el-table-column>
        <el-table-column prop="tic" align="center" label="专利标题" width="300">
        </el-table-column>
        <el-table-column align="center" label="当前权利状态">
          <template slot-scope="scope">
            <el-tag style="border:none;" size="small" effect="dark" color="#4ba22f" v-if="scope.row.status == '有效'">
              {{ scope.row.status }}</el-tag>
            <el-tag style="border:none;" size="small" effect="dark" color="#da7b21" v-if="scope.row.status == '在审'">
              {{ scope.row.status }}</el-tag>
            <el-tag style="border:none;" size="small" effect="dark" color="#6c778b" v-if="scope.row.status == '无效'">
              {{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="pdt" align="center" label="专利类型">
        </el-table-column>
        <el-table-column prop="apc" align="center" label="当前申请(专利权)人">
        </el-table-column>
        <el-table-column prop="inc" align="center" label="发明人">
        </el-table-column>
        <el-table-column prop="ad" align="center" label="申请日">
        </el-table-column>
        <el-table-column prop="pd" align="center" label="公告(公开)日">
        </el-table-column>
        <el-table-column prop="pns" align="center" label="公开号" width="130">
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background v-if="page.total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="page.page" :page-size="page.page_row" layout="total, prev, pager, next, jumper"
          :total="parseInt(page.total)" align='left'></el-pagination>
      </div>
    </el-main>
    <Service v-if='this.$route.meta.serve' />
  </div>
</template>

<script>
import { search } from "@/api"
import Service from '@/components/Service'
export default {
  components: {
    Service
  },
  data() {
    return {
      tableData: [],
      currentPage: 1, //默认显示页面为1
      pagesize: 10, //    每页的数据条数
      page: [],
      list_page: sessionStorage.getItem('list_page') ? sessionStorage.getItem('list_page') : 1,
      val: null,
      search: '',
      type: null,
      items: [
        { type: '', label: '发明专利' },
        { type: '', label: '实用类型' },
        { type: '', label: '外观设计' },
      ],
      sort_column: '-AD',
      columnOptions: [
        { value: '-AD', label: '申请日从新到旧' },
        { value: '+AD', label: '申请日从旧到新' },
        { value: '-PD', label: '公开日从新到旧' },
        { value: '+PD', label: '公开日从旧到新' },
      ],
    }
  },
  // beforeRouteEnter: (to,from,next) => {
  //    // console.log(to)
  // },
  mounted() {
    try {
      if (this.$route.query.val) {
        this.val = this.$route.query.val
        search({
          page: this.list_page,
          keywords: this.$route.query.val,
          sort_column: this.sort_column
        }).then(res => {
          if (res.patent_list) {
            this.tableData = res.patent_list;
            this.page = res.page
            if (res.page.total >= 10000) {
              this.page.total = 10000
            }
          } else {
            this.tableData = []
            this.page = {
              page: 1,
              page_row: 10,
              total: "0"
            }
          }
          // console.log(res);
        })
      }
    } catch (e) {
      this.$message(err.message);
    }


  },
  methods: {
    rowClick(row, event, column) {
      const pid = row.pid;
      const ano = row.ano;
      sessionStorage.setItem('list_page', this.list_page)
      sessionStorage.setItem('pc', 1)
      sessionStorage.setItem("Shundepc",1) 
      //新窗口打开
      const { href } = this.$router.resolve({
        path: "/detail",
      });
      window.open(href + `?pid=${pid}&shunqiNewWebType=0`, "_blank");
      // this.$router.push({ path: "/detail", query: { "pid": pid } })
    },
    async searchDocking() {
      try {
        const res = await search({
          keywords: `${this.val},${this.search ? ',' + this.search : ""}`,
          sort_column: this.sort_column
        })
        if (res.patent_list) {
          this.tableData = res.patent_list;
          this.page = res.page
          if (res.page.total >= 10000) {
            this.page.total = 10000
          }
        } else {
          this.tableData = []
          this.page = {
            page: 1,
            page_row: 10,
            total: "0"
          }
        }
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    //每页下拉显示数据
    async handleSizeChange(size) {
      try {
        const res = await search({
          page: size,
          keywords: `${this.val}${this.search ? ',' + this.search : ""}`,
          sort_column: this.sort_column
        })
        if (res.patent_list) {
          this.tableData = res.patent_list;
          this.page = res.page
          if (res.page.total >= 10000) {
            this.page.total = 10000
          }
        } else {
          this.tableData = []
          this.page = {
            page: 1,
            page_row: 10,
            total: "0"
          }
        }
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    async columnChange() {
      try {
        const res = await search({
          keywords: `${this.val},${this.search ? ',' + this.search : ""}`,
          sort_column: this.sort_column,
          page: 1
        })
        if (res.patent_list) {
          this.tableData = res.patent_list;
          this.page = res.page
          if (res.page.total >= 10000) {
            this.page.total = 10000
          }
        } else {
          this.tableData = []
          this.page = {
            page: 1,
            page_row: 10,
            total: "0"
          }
        }
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        const res = await search({
          page: currentPage,
          keywords: `${this.val}${this.search ? ',' + this.search : ""}`,
          sort_column: this.sort_column
        })
        this.tableData = res.patent_list;
        this.page = res.page
        this.list_page = res.page.page

        if (res.page.total >= 10000) {
          this.page.total = 10000
        }
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    
  }
}
</script>

<style scoped >
.pagination {
  margin: 15px 0;
}

.el-pagination {
  text-align: right;
}


.right {
  margin-right: 10px;
  height: 40px;
  line-height: 40px;
}

@media (max-width:1600px) {
  #table {
    width: 95% !important;
  }

}
</style>
